<template>
  <div class="tree-box" style="background-color: white; width: 100%; height: 100%">
    <div style="padding: 10px;">
      <div style="margin-bottom: 20px;">
        <el-input suffix-icon="el-icon-search" v-model="input" placeholder="请输入搜索关键字"></el-input>
      </div>
      <el-tree
        :data="list"
        show-checkbox
        node-key="id"
        default-expand-all
        :props="defaultProps"
      >
      </el-tree>
    </div>
  </div>
</template>

<script>
import create from "../core/echart/create";
export default create({
  name: "tree",
  data() {
    return {
      input: "",
      list: [
        {
          id: '1',
          label: "晋祠宾馆",
          children: [
            {
              id: '1-1',
              label: "1号楼",
              children: [
                {
                  id: '1-1-1',
                  label: "101",
                },
                {
                  id: '1-1-2',
                  label: "102",
                },
              ],
            },
            {
              id: '1-2',
              label: "2号楼",
              children: [
                {
                  id: '1-2-1',
                  label: "101",
                },
                {
                  id: '1-2-2',
                  label: "105",
                },
              ],
            },
            {
              id: '1-3',
              label: "3号楼",
              children: [
                {
                  id: '1-3-1',
                  label: "201",
                },
                {
                  id: '1-3-2',
                  label: "306",
                },
              ],
            },
          ],
        },
        {
          id: '2',
          label: "员工宿舍",
          children: [
            {
              id: '2-1',
              label: "1栋102",
            },
            {
              id: '2-2',
              label: "2栋205",
            },
          ],
        },
        {
          id: '3',
          label: "晋祠宾馆家属院",
          children: [
            {
              id: '3-1',
              label: "1号楼",
            },
            {
              id: '3-2',
              label: "2号楼",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
});
</script>

<style scoped>
.tree-box >>> input{
    -webkit-appearance: none !important;
    background-color: #fff !important;
    background-image: none !important;
    border-radius: 4px !important;
    border: 1px solid #dcdfe6 !important;
    box-sizing: border-box !important;
    color: #606266 !important;
    display: inline-block !important;
    font-size: inherit !important;
    height: 40px !important;
    line-height: 40px !important;
    outline: none !important;
    padding: 0 15px !important;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1) !important;
    width: 100% !important;
}
</style>